<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../reset.css">
    <title>css-grid- 初识</title>
    <style>
        img{
            max-width: 100%;
        }
        .wrapper {
            display: grid;
            /* grid-template-columns: 25% 25% 25% 25%; */
            /* grid-template-columns: 1fr 1fr 1fr 1fr; */
            /* grid-auto-rows: 80px; */
            /* grid-auto-columns: 200px; */
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(80px,auto);
            /* grid-column-gap: 5px;  */
            /* grid-row-gap: 5px; */
            grid-gap: 5px;
        }
        .item{
            padding: 20px 10px;
        }
        .One{
            background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
        }
        .Two{
            background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
        }
        .Three{
            background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
        }
        .Four{
            background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
        }
        .Five{
            background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
        }
        .Six{
            background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
        }
        .Seven{
            background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
            grid-column-start: 1;
            grid-column-end: 4;
        }
        .Eight{
            background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
            grid-row-start: 4;
            grid-row-end: 6;
        }
        .Nine{
            background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
        }
        .Ten{
            background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
        }
        .Eleven{
            background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
            grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 5;
            grid-row-end: 7;
        }
        .Twelve{
            background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
        }
        .Thirteen{
            background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
        }
        .z-wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 100px;
        }
        .box1 {
            grid-column-start: 1;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 3;
            z-index: 2;
            background-color: #ccc;
        }
        .box2 {
            grid-column-start: 1;
            grid-row-start: 2;
            grid-row-end: 4;
            z-index: 1;
            background-color: #f40;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="One item " >One</div>
        <div class="Two item " >
            Two<br>
            新华社北京6月25日电中共中央总书记、国家主席、中央军委主席习近平将出席庆祝香港回归祖国25周年大会暨香港特别行政区第六届政府就职典礼。
        </div>
        <div class="Three item " >Three</div>
        <div class="Four item " >Four</div>
        <div class="Five item " >Five</div>
        <div class="Six item " >Six</div>
        <!-- 网格线和跨轨道放置元素，可以理解为合并单元格 -->
        <div class="Seven item " >
            <p style="margin: 10px 0;" >
                我想让它占据一整行，也就是类似合并列。
            </p>
            【取款难银行回应系统突然开通15分钟 出现了异常】被关闭的村镇银行系统可以线上交易了？大约仅仅好使了15分钟，又无法操作了。这是怎么回事？
            6月26日，“河南村镇银行取款难”事件有了新的变化，在多家涉事银行公告关闭线上交易系统的同时，开封新东方村镇银行突然开通线上交易系统。天目新闻记者了解到，在线上系统开通的时间内，有些储户将自己的存款取了出来。<br>
            <p style="margin: 10px 0;" >
                之前定义的行高度自动同样生效哦
            </p>
        </div>
        <div class="Eight item " >
            <p style="margin: 10px 0;" >
                我想让它占据两行，也就是类似行并列。
            </p>
        </div>
        <div class="Nine item " ></div>
        <div class="Ten item " ></div>
        <div class="Eleven  item " >
            <p style="margin: 10px 0;" >
                行和列的同时合并
            </p>
        </div>
        <div class="Twelve  item " ></div>
        <div class="Thirteen   item " ></div>
    </div>   
    <!-- z-index -->
    <h4>z-index</h4>
    <div class="z-wrapper">
        <div class="box box1">One</div>
        <div class="box box2">Two</div>
        <div class="box box3">Three</div>
        <div class="box box4">Four</div>
        <div class="box box5">Five</div>
    </div>
    <code>
        <h4>grid-template-columns</h4>
        grid-template-columns: 定义列的一些信息<br>
        grid-template-columns: 25% 25% 25% 25%; 表示分成了4列，每一列宽度占25%<br>
        当然可以改成其他单位如 px 等，也可以单独定义某一列的宽度<br>
        grid-template-columns: 200px 25% 25% 25%;
        <h4>fr</h4>
        fr 可以就简单理解为 <b>百分比</b>，它表示一等份<br>
        grid-template-columns: 25% 25% 25% 25%; 等同于 grid-template-columns: 1fr 1fr 1fr 1fr;<br>
        <h4>repeat</h4>
        重复定义 css 的简写，比如上面定义列，分成4份，每一列占比25%<br>
        4份还好，假如是10份、20份呢？那不是得写很长？<br>
        于是有了 repeat ；grid-template-columns: repeat(4,25%);
        <h4>grid-auto-rows、grid-auto-columns</h4>
        grid-auto-rows：定义行的高度<br>
        grid-auto-columns：定义列的宽度（ps：假如你已经定义的了 grid-template-columns --- 这个属性本身就是定义列宽度，所以你再定义 grid-auto-columns 是不生效的）<br>
        有时候，你可能并不想固定行高度，而是有一个最大最小<br>
        grid-auto-rows: minmax(80px,auto)
        <h4>网格线和合并操作</h4>
        grid-column-start、grid-column-end、grid-row-start、grid-row-end<br>
        顾名思义：这四个属性就是用来操作合并单元格的（在使用前，有必要了解下栅格布局中的网格线）
        <h4>网格间距</h4>
        grid-column-gap、grid-row-gap、grid-gap（前俩的简写）<br>
        也就是定义行列的间距大小
        <h4>z-index</h4>
        在操作合并时，可能会发生单元格合并问题
    </code>  
    <h4 style="margin-top:50px;" >网格线 --- 图片源于MDN 文档</h4>
    <div>
        <img src="./img/grid-lines.png" alt="">
    </div>
</body>
</html>